<template>
    <div>
        <div style="margin: 0px auto;width:60%" >
            <input type="text" v-model.trim="dat.where.adrInfo" placeholder="请输入详细地址"/>
            <input type="submit" value="搜索" @click="search()">
            <br/>
            <table width="100%" border="1px" cellspacing="0px">
                <tr>
                    <td>名字</td>
                    <td>电话</td>
                    <td>省份</td>
                    <td>详细地址</td>
                </tr>
                <tr v-for="(item, index) in addressList" :key="index">
                    <td>{{item.adrUsername}}</td>
                    <td>{{item.adrPhone}}</td>
                    <td>{{item.adrProvince}}</td>
                    <td>{{item.adrInfo}}</td>
                </tr>
            </table>

            <!-- 分页栏 -->
            <a href="" @click.prevent="dat.page=item;search();" v-for="item in pages" :key="item.adrId" >【{{item}}】</a>
       
       
            <!-- 添加form -->
            <form action="">

                <input type="text" v-model="entity.adrUsername"><br/>
                <input type="text" v-model="entity.adrProvince"><br/>
                <input type="submit" value="添加地址" @click.prevent="save()">

            </form>
           
        </div>
    </div>
</template>
<script>
import {fetchData,save} from '../api/address'
export default {
    
    data() {
        return {
            dat:{
                page:1,
                size:5,
                where:{
                    adrInfo:""
                }
            },
            addressList:[],
            pages:0,
            entity:{} 
        }
    },
    methods:{
            search(){
               
                fetchData(this.dat).then(res=>{
                   
                    this.addressList = res.list;

                    this.pages = res.pages
                })
                .catch(err=>{})
            },
            save(){
               
                save(this.entity).then(res=>{
                       this.search();  //刷新数据 
                       if(!res.success){
                            alert(res.msg);
                       }
                })
                .catch(err=>{})
            }
    },
    created(){
           //当页面加载，立即获取地址列表
            this.search();
    },
    
}
</script>
<style lang="css">
    
</style>